<template>
    <div :class="['avatar-wrap', roundClass, sizeClass]">
        <lazy-image class="avatar-img" :src="src" alt="头像" :webp="false"></lazy-image>
        <template v-if="isVerify">
            <img v-if="isOfficalVerify" class="icon" src="@/assets/images/upzhu.png" alt="up主认证">
            <img v-if="isEnterprise" class="icon" src="@/assets/images/enterprise.png" alt="企业认证">
        </template>
        <template v-else>
            <template v-if="isVip">
                <i class="fa fa-vip"></i>
            </template>
        </template>
    </div>
</template>

<script>
import { computed } from 'vue'
import LazyImage from '@/components/LazyImage'
export default {
    name: 'Avatar',    
    components: {
        LazyImage
    },
    props: {
        // 头像地址
        src: {
            type: String
        },
        // 是否圆角
        round: {
            type: Boolean,
            default: true
        },
        // 尺寸 可选 small large
        size: {
            type: String,
            default: 'small'
        },
        // vip状态值 -1非会员，其他是会员
        vip: {
            type: Number,
            default: -1
        },
        // 官方认证信息
        official: {
            type: Object,
            default() {
                return {
                    desc: '',
                    type: -1
                }
            }
        }
    },
    setup(props) {
        const sizes = ['small', 'large']
        const sizeClass = sizes.includes(props.size) ? `avatar-wrap-${props.size}` : ''
        const isVip = computed(() => props.vip > 0)
        const isVerify = computed(() => props.official.type > -1)
        const isOfficalVerify = computed(() => props.official.type === 0)
        const isEnterprise = computed(() => props.official.type === 1)     
        const roundClass = props.round ? 'avatar-wrap-round' : ''

        return {
            isVip,
            isVerify,
            isOfficalVerify,
            isEnterprise,
            roundClass,
            sizeClass
        }
    }
}
</script>

<style lang="scss" scoped>
    .avatar-wrap {
        position: relative;
        width: 40px;
        height: 40px;
        overflow: hidden;
        &:before{
            content: "";
            display: block;
            width: 100%;
            padding-bottom: 100%;
        }
        :deep .avatar-img{
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
        }
        &-small {
            width: 40px;
            height: 40px;
        }
        &-large {
            width: 84px;
            height: 84px;
        }
        &-round {   
            :deep .avatar-img {
                border-radius: 50%;    
            }            
        }

        .fa {
            position: absolute;
            right: -3px;
            bottom: -3px;
            display: block;
            color: $theme-color;
            font-size: 18px;
            background-color: $color-white;
            border-radius: 50%;
        }
        .icon{
            display: block;
            width: 18px;
            height: 18px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        &-large {
            .icon{
                width: 22px;
                height: 22px;
            }
        }
    }
</style>